<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col style="font-size: 16px;font-weight: 400;color: #292B3D;"
        >班制设置</el-col
      >
      <el-button
        size="small"
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="
          dialogVisible = true;
          dialogType = 'add';
        "
        >添加排班</el-button
      >
    </el-row>
    <div class="shift-set">
      <el-card class="box-card" v-for="(item, i) in classList" :key="i">
        <div slot="header">
          <el-row type="flex" justify="space-between">
            <div>{{ item.shiftType }}</div>
            <div>
              <el-button
                type="text"
                icon="el-icon-edit-outline"
                size="small"
                style="padding:0"
                @click="updateClass(item)"
                >编辑</el-button
              >
              <el-button
                type="text"
                icon="el-icon-delete"
                class="danger"
                style="padding:0"
                size="small"
                @click="delClass(item.id)"
                >删除</el-button
              >
            </div>
          </el-row>
        </div>
        <div class="card-content">
          <el-row>
            <el-col :span="8" v-for="(bc, b) in item.bcList" :key="b">
              <div class="bc">{{ bc }}</div>
              <!-- <div class="gs">工时：<span>12h </span>00:00-12:00</div> -->
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <el-dialog
      custom-class="common-dialog"
      :visible.sync="dialogVisible"
      width="540px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="dialogType == 'add' ? '增加班制' : '编辑班制'"
      destroy-on-close
      center
      @close="closeDialog"
    >
      <el-form ref="addForm" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="班制名称" prop="shiftType">
          <el-input
            v-model="form.shiftType"
            size="small"
            style="width:200px"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="班次" prop="bcList">
          <div v-for="(item, i) in form.bcList" :key="i">
            <el-input
              v-model="item.name"
              size="small"
              style="width:200px"
              placeholder="请输入"
            ></el-input>
            <el-button
              type="text"
              @click="delRow(i)"
              style="color:rgb(245,108,108);margin-left:10px;font-size:16px"
              ><i class="el-icon-remove-outline"
            /></el-button>
          </div>
          <el-button type="text" @click="addRow"
            ><i
              class="el-icon-plus"
              style="font-weight:bold;margin-right:4px"
            />添加班次</el-button
          >
        </el-form-item>
      </el-form>
      <div class="btn-list">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClass">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getClass, addClass, updateClass, delClass } from '@/api/shifts';
export default {
  data() {
    return {
      classList: [],
      dialogVisible: false,
      dialogType: 'add',
      rules: {
        shiftType: [
          { required: true, message: '请输入班制名称', trigger: 'blur' }
        ]
      },
      form: {
        shiftType: '',
        bcList: []
      }
    };
  },
  created() {
    this.getClass();
  },
  methods: {
    async getClass() {
      const res = await getClass();
      if (res.code == 1) {
        this.classList = res.data;
      }
    },
    addClass() {
      this.$refs['addForm'].validate(async valid => {
        if (valid) {
          let form = Object.assign({}, this.form);
          let arr = [];
          form.bcList.map(item => {
            if (item.name) {
              arr.push(item.name);
            }
          });
          form.bcList = arr;
          const res =
            this.dialogType == 'add'
              ? await addClass(form)
              : await updateClass(form);
          if (res.code == 1) {
            this.$message({
              message: this.dialogType == 'add' ? '新增成功' : '修改成功',
              iconClass: 'el-icon-success',
              customClass: 'common-message'
            });
            this.getClass();
            this.dialogVisible = false;
          }
        } else {
          return false;
        }
      });
    },
    updateClass(val) {
      let bcList = val.bcList.map(item => {
        return { name: item };
      });
      this.form = Object.assign({}, val);
      this.form.bcList = bcList;
      this.dialogType = 'edit';
      this.dialogVisible = true;
    },
    delClass(id) {
      this.$confirm('是否确认删除该班制?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delClass({ id: id });
        if (res.code == 1) {
          this.$message({
            message: '删除成功',
            iconClass: 'el-icon-success',
            customClass: 'common-message'
          });
          this.getClass();
        }
      });
    },

    addRow() {
      this.form['bcList'].push({ name: '' });
    },
    delRow(i) {
      this.form['bcList'].splice(i, 1);
    },
    closeDialog() {
      this.form = {
        shiftType: '',
        bcList: []
      };
    }
  }
};
</script>
<style lang="scss">
.shift-set {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 15px));
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  margin-top: 15px;
  .box-card {
    .el-card__header {
      font-size: 16px;
      font-weight: 500;
      color: #292b3d;
      border-bottom: none;
    }
    .el-card__body {
      padding: 0 20px 20px 20px;
    }
    .bc {
      color: #39475d;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .gs {
      font-weight: 400;
      color: #606d86;
      margin-bottom: 20px;
      span {
        color: #f0960f;
      }
    }
  }
}
</style>
